<template>
  <div class="dynamic-factor-container">
    <!-- 雷达图 -->
    <dv-border-box13 title="动态因子图">
      <span class="chart-title">动态因子图</span>
      <div ref="radarRef" class="radar-chart"></div>
    </dv-border-box13>
    <!-- 表格 -->
    <el-table :data="tableData" class="factor-table" border>
      <el-table-column prop="type" label="平均" width="80" />
      <el-table-column prop="downSpeed" label="下钻速度" />
      <el-table-column prop="emptySpeed" label="空载速度" />
      <el-table-column prop="loadSpeed" label="负载速度" />
      <el-table-column prop="bigStatic" label="大勾静止" />
      <el-table-column prop="utilTime" label="衔接用时" />
    </el-table>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, onBeforeUnmount } from 'vue'
  import * as echarts from 'echarts'

  const radarRef = ref<HTMLDivElement | null>(null)
  //当前视口宽度
  let nowClientWidth = ref(document.documentElement.clientWidth)
  //换算方法
  function nowSize(val: number, initWidth = 1920) {
    return val * (nowClientWidth.value / initWidth)
  }

  const radarData = [
    { name: '下钻速度', value: 91.51 },
    { name: '空载速度', value: 56.89 },
    { name: '负载速度', value: 77.92 },
    { name: '大勾静止', value: 87.69 },
    { name: '衔接用时', value: 90.74 },
  ]

  let myChart: echarts.ECharts | null = null

  const setRadarOption = () => {
    if (radarRef.value) {
      if (!myChart) {
        myChart = echarts.init(radarRef.value)
      }
      myChart.setOption({
        tooltip: {},
        radar: {
          center: ['50%', '60%'],
          indicator: radarData.map((item) => ({
            name: item.name,
            max: 100,
          })),
          radius: '60%',
          splitArea: { areaStyle: { color: ['#f5faff', '#e3f2fd'] } },
          axisLine: { lineStyle: { color: '#90caf9' } },
          splitLine: { lineStyle: { color: '#90caf9' } },
          name: {
            color: '#1976d2',
            fontWeight: 'bold',
            fontSize: nowSize(14),
          },
        },
        series: [
          {
            type: 'radar',
            data: [
              {
                value: radarData.map((item) => item.value),
                name: '排名',
                areaStyle: { color: 'rgba(33, 150, 243, 0.3)' },
                lineStyle: { color: '#2196f3' },
                symbol: 'circle',
                symbolSize: nowSize(8),
                itemStyle: { color: '#1976d2' },
                label: {
                  fontSize: nowSize(14),
                },
              },
            ],
          },
        ],
      })
      myChart.resize()
    }
  }

  const handleResize = () => {
    if (myChart) {
      nowClientWidth.value = document.documentElement.clientWidth
      myChart.setOption({
        radar: {
          name: {
            fontSize: nowSize(14),
          },
        },
        series: [
          {
            symbolSize: nowSize(8),
            label: {
              fontSize: nowSize(14),
            },
          },
        ],
      })
      myChart.resize()
    }
  }

  onMounted(() => {
    setRadarOption()
    window.addEventListener('resize', handleResize)
  })

  onBeforeUnmount(() => {
    window.removeEventListener('resize', handleResize)
    if (myChart) {
      myChart.dispose()
      myChart = null
    }
  })

  // 表格数据
  const tableData = [
    { type: '0%', downSpeed: 948.1, emptySpeed: 1.11, loadSpeed: 1.76, bigStatic: 0.45, utilTime: 1.48 },
    { type: '10%', downSpeed: 828.9, emptySpeed: 0.93, loadSpeed: 1.19, bigStatic: 0.58, utilTime: 1.67 },
    { type: '30%', downSpeed: 592.17, emptySpeed: 0.76, loadSpeed: 0.85, bigStatic: 0.79, utilTime: 2.01 },
    { type: '50%', downSpeed: 425.97, emptySpeed: 0.56, loadSpeed: 0.48, bigStatic: 1.01, utilTime: 2.24 },
    { type: '70%', downSpeed: 292.96, emptySpeed: 0.37, loadSpeed: 0.28, bigStatic: 1.27, utilTime: 2.56 },
    { type: '90%', downSpeed: 155.93, emptySpeed: 0.29, loadSpeed: 0.11, bigStatic: 2.48, utilTime: 3.98 },
    { type: '100%', downSpeed: 0.72, emptySpeed: 0.0, loadSpeed: 0.0, bigStatic: 228.61, utilTime: 27.95 },
    { type: '排名', downSpeed: '91.51%', emptySpeed: '56.89%', loadSpeed: '77.92%', bigStatic: '87.69%', utilTime: '90.74%' },
    { type: '实际值', downSpeed: 113.4, emptySpeed: 0.47, loadSpeed: 0.18, bigStatic: 2.08, utilTime: 4.23 },
  ]
</script>

<style scoped lang="scss">
  .dynamic-factor-container {
    background: #fff;
    border-radius: 8px;
    position: relative;
    // padding: 24px;
    // min-height: 100vh;
    .chart-title {
      font-size: 18px;
      font-weight: bold;
      top: 18px;
      left: 12px;
      position: absolute;
    }
  }
  .radar-chart {
    width: 100%;
    // max-width: 600px;
    height: 38vw;
    max-height: 400px;
    min-height: 260px;
    // margin: 48px auto 0 auto;
    // background: #fff;
  }
  .factor-table {
    width: 100%;
    margin-top: 10px;
    background: #fff;
    border-radius: 8px;
    font-size: 15px;
  }
  .el-table th,
  .el-table td {
    background: #fff !important;
    color: #222;
  }
</style>
